<template>
  <basic-container>
    <div class="avue-crud">
      <div class="avue-crud__menu">
        <div class="avue-crud__left">
          <el-button v-if="permissions.sys_tree_all || permissions.goods_category_add"
                     icon="el-icon-plus"
                     type="primary"
                     @click="addOrUpdateHandle(false)">
            添加
          </el-button>
        </div>
        <div class="avue-crud__right">
          <el-tooltip class="item"
                      effect="dark"
                      content="刷新"
                      placement="top">
            <el-button icon="el-icon-refresh"
                       class="is-circle"
                       @click="getList()">
            </el-button>
          </el-tooltip>
        </div>
      </div>

      <el-table border
                v-loading="loading"
                :data="goodsCategorys"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildrens'}">
        <el-table-column prop="name"
                         label="分类名称"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="hierarchy"
                         label="层级"
                         align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.hierarchy == 1">一级分类</el-tag>
            <el-tag type="success"
                    v-if="scope.row.hierarchy == 2">二级分类</el-tag>
            <el-tag type="warning"
                    v-if="scope.row.hierarchy == 3">三级分类</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expand"
                         label="前端显示"
                         align="center"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.expand"
                       @change="expandChange(scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-value="1"
                       active-text="是"
                       inactive-value="0"
                       inactive-text="否">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="develop"
                         label="规格模板"
                         align="center"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.develop"
                       @change="developChange(scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-value="1"
                       active-text="是"
                       inactive-value="0"
                       inactive-text="否">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort"
                         align="center"
                         label="排序"></el-table-column>
        <el-table-column prop="extra"
                         label="图片"
                         align="center"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div class="avue-crud__img"
                 v-if="scope.row.hierarchy == 3">
              <el-image :src="scope.row.extra"
                        :preview-src-list="[ scope.row.extra ]">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center"
                         width="240"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       icon="el-icon-plus"
                       @click="addOrUpdateHandle(false,scope.row)"
                       v-if="(permissions.sys_tree_all || permissions.goods_category_add) && scope.row.hierarchy < 3">新增
            </el-button>
            <el-button size="small"
                       type="text"
                       icon="el-icon-edit"
                       @click="addOrUpdateHandle(true,scope.row)"
                       v-if="permissions.sys_tree_all || permissions.goods_category_edit">修改
            </el-button>
            <el-button size="small"
                       type="text"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row.id)"
                       v-if="permissions.sys_tree_all || permissions.goods_category_del">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <table-form v-if="addOrUpdateVisible"
                  ref="addOrUpdate"
                  @refreshDataList="getList" />
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from 'vuex'
import TableForm from './category-form'
import { fetchTree, delObj, putObj } from "@/api/admin/sys-tree"

export default {
  name: 'goodsCategory',
  data () {
    return {
      addOrUpdateVisible: false,
      // 遮罩层
      loading: false,
      // 菜单表格树数据
      goodsCategorys: [],
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  components: { TableForm },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      fetchTree({ treeType: 3 }).then(response => {
        this.goodsCategorys = response.data.data || [];
      });
    },
    addOrUpdateHandle (isEdit, row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs['addOrUpdate'].init(isEdit, row)
      })
    },
    handleDelete (id) {
      delObj(id).then((resp) => {
        this.$message.success(resp.data.message);
        this.getList();
      });
    },
    expandChange (row) {
      putObj({ treeId: row.id, name: row.name, treeType: 3, expand: row.expand }).then(resp => {
        this.$message.success("修改状态成功");
      })
    },
    developChange (row) {
      putObj({ treeId: row.id, name: row.name, treeType: 3, develop: row.develop }).then(resp => {
        this.$message.success("修改状态成功");
      })
    }
  }
}
</script>